<template>
    <div class="updateForm">
        <el-form
                ref="formData"
                :model="formData"
                :rules="rules"
                class="el-form"
                label-width="120px">
        <el-row>
            <div class="title-lable">
                <div class="label-name">
                    <label>项目概况</label>
                </div> 
            </div>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                    label="项目编号"
                    prop="projectId">
                    <el-input
                        v-model="formData.projectId"
                        :disabled = "true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            
            <el-col :span="8">
                <el-form-item
                    label="分区/地块数">
                    <el-input
                        v-model="formData.zoneNumber"
                        :disabled = "true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="超期天数">
                    <el-input
                        v-model="formData.overdue"
                        :disabled = "true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                    label="项目名称"
                    prop="projectName">
                    <el-input
                        v-model="formData.projectName"
                        placeholder="请输入项目名称"/>
                </el-form-item>
            </el-col>
<el-col :span="8">
                <el-form-item
                    label="项目类型"
                    prop="projectType">
                    <el-select v-model="formData.projectType" filterable placeholder="请选择" >
                        <el-option
                            v-for="item in proTypeOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="项目状态"
                    prop="status">
                    <el-select v-model="formData.progressStatus" filterable placeholder="请选择" >
                        <el-option
                            v-for="item in proState"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>


        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item
                    label="涉及范围/m^2"
                    prop="acreage">
                    <el-input
                        v-model="formData.acreage"
                        placeholder="请输入涉及范围/m^2"/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="项目负责人"
                    prop="projectType">
                    <el-select v-model="formData.userId" filterable @change="resetUserInfo($event)" placeholder="请选择"  >
                        <el-option
                            v-for="item in userOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                            </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="联系电话">
                    <el-input
                        v-model="formData.phonenumber"
                        :disabled = "true"
                        placeholder=""/>
                </el-form-item>
            </el-col>
            
        </el-row>
        <el-row> 
            <el-col :span="8">
                <el-form-item
                    label="开始时间"
                    prop="beginDate">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="formData.beginDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="预计结束时间"
                    prop="endDate">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="formData.endDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item
                    label="实际结束时间"
                    prop="actualEndDate">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="开始日期" v-model="formData.actualEndDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
<el-row>
    <el-form-item
                    label="备注">
                    <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="formData.remark">
                    </el-input>
                </el-form-item>
</el-row>
        <el-row>
            <div class="title-lable">
                <div class="label-name">
                    <label>项目描述</label>
                </div> 
            </div>
        </el-row>
        <el-row>
            <el-form-item
                    label="项目描述"
                    prop="projectDesc">
                    <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                                v-model="formData.projectDesc">
                    </el-input>
                </el-form-item>
        </el-row>
        </el-form>
        <el-row class="save">
            <el-button type="primary" @click="updateSave">保存</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'proDetail',
    props: {
        formData: {},
        userOptions:{
            type:Array
        }
    },
    data() {
        return {
            form:{projectState:"0"},
            // 表单校验
            rules: {
                projectName: [
                    { required: true, message: "项目名称不能为空", trigger: "blur" }
                ],
                projectType: [
                    { required: true, message: "项目类型必须选择", trigger: "blur" }
                ],
                userId: [
                    { required: true, message: "项目负责人不能为空", trigger: "blur" }
                ]  
            },
            proState:[{"id": "0","label": "进行中"},
                     {"id": "1","label": "已完成"}],
            //项目类型
            proTypeOptions:[{"id": "0","label": "路探"},
                        {"id": "1","label": "场地污染"}],
            //用户选择Options
        };
    },
    mounted() {
        
    },
    methods: {
        //用户选择联动
        resetUserInfo(value){
            const valueObj= this.userOptions.find((item)=>{return item.id === value;});
            this.form.userName = valueObj.label;
            this.form.phonenumber = valueObj.telephone;
            this.form.agencyId = valueObj.agencyId
        },
        //项目信息保存
        updateSave(){
            this.$refs["formData"].validate(valid => {
                if (valid) {
                    this.$emit('updateProject',this.formData);
                }
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.updateForm{
    min-height: calc(100vh - 198px) ;
}
.title-lable{
    display: flex;
    margin: 20px 0px;
    align-items: center; 
    padding-left: 26px;
    position: relative;
    label{
        margin-left: 10px;
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #222222;
        line-height: 20px;
    }
}
.label-name:before{
    content: " ";
    position: absolute;
    width: 3px;
    display: inline-block;
    height: 16px;
    /* right: -20px; */
    top: 50%;
    transform: translateY(-50%);
    background-color: #5378FF;
}
.save{
    position: absolute;
    bottom: 5px;
    left: 48%;
}

</style>